<template>
	<div class="css-text">
		<h2>颜色类</h2>
		<div class="fo-Gray mt10">一些背景颜色和字体颜色相关的css类封装</div>

		<h4 class="mt40">常规</h4>
		
		<div class="fo-Gray mb40">线条颜色是(line-XXX...) 线条的高度是2px</div>
		<div class="line-Auqamarin mb10"></div>
		<div class="line-MediumSlateBlue mb10"></div>
		<div class="line-Fuchsia mb40"></div>
		
		
		
		<div class="fo-Gray mb4">背景颜色是(bg-XXX...)</div>
		<div class="fo-Gray mb40">字体颜色是(fo-XXX...)</div>
		
		<div class="flex flex-wrap">
			<colorBox names="浅粉红" classes="bg-LightPink"></colorBox>
			<colorBox names="粉红" classes="bg-Pink"></colorBox>
			<colorBox names="猩红" classes="bg-Crimson"></colorBox>
			<colorBox names="脸红的淡紫色" classes="bg-LavenderBlush"></colorBox>
			<colorBox names="苍白的紫罗兰红" classes="bg-PaleVioletRed"></colorBox>
			<colorBox names="热情的粉红" classes="bg-HotPink"></colorBox>
			<colorBox names="深粉色" classes="bg-DeepPink"></colorBox>
			<colorBox names="适中的紫罗兰红" classes="bg-MediumVioletRed"></colorBox>
			<colorBox names="兰花的紫色" classes="bg-Orchid"></colorBox>
			<colorBox names="蓟" classes="bg-Thistle"></colorBox>
			<colorBox names="李子" classes="bg-plum"></colorBox>
			<colorBox names="紫罗兰" classes="bg-Violet"></colorBox>
			<colorBox names="洋红" classes="bg-Magenta"></colorBox>
			<colorBox names="灯笼海棠(紫红色)" classes="bg-Fuchsia"></colorBox>
			<colorBox names="深洋红色" classes="bg-DarkMagenta"></colorBox>
			<colorBox names="紫色" classes="bg-Purple"></colorBox>
			<colorBox names="适中的兰花紫" classes="bg-MediumOrchid"></colorBox>
			<colorBox names="深紫罗兰色" classes="bg-DarkVoilet"></colorBox>
			<colorBox names="深兰花紫" classes="bg-DarkOrchid"></colorBox>
			<colorBox names="靛青" classes="bg-Indigo"></colorBox>
			<colorBox names="深紫罗兰的蓝色" classes="bg-BlueViolet"></colorBox>
			<colorBox names="适中的紫色" classes="bg-MediumPurple"></colorBox>
			<colorBox names="适中的板岩暗蓝灰色" classes="bg-MediumSlateBlue"></colorBox>
			<colorBox names="板岩暗蓝灰色" classes="bg-SlateBlue"></colorBox>
			<colorBox names="深岩暗蓝灰色" classes="bg-DarkSlateBlue"></colorBox>
			<colorBox names="熏衣草花的淡紫色" classes="bg-Lavender"></colorBox>
			<colorBox names="幽灵的白色" classes="bg-GhostWhite"></colorBox>
			<colorBox names="纯蓝" classes="bg-Blue"></colorBox>
			<colorBox names="适中的蓝色" classes="bg-MediumBlue"></colorBox>
			<colorBox names="午夜的蓝色" classes="bg-MidnightBlue"></colorBox>
			<colorBox names="深蓝色" classes="bg-DarkBlue"></colorBox>
			<colorBox names="海军蓝" classes="bg-Navy"></colorBox>
			<colorBox names="皇家蓝" classes="bg-RoyalBlue"></colorBox>
			<colorBox names="矢车菊的蓝色" classes="bg-CornflowerBlue"></colorBox>
			<colorBox names="淡钢蓝" classes="bg-LightSteelBlue"></colorBox>
			<colorBox names="浅石板灰" classes="bg-LightSlateGray"></colorBox>
			<colorBox names="石板灰" classes="bg-SlateGray"></colorBox>
			<colorBox names="道奇蓝" classes="bg-DoderBlue"></colorBox>
			<colorBox names="爱丽丝蓝" classes="bg-AliceBlue"></colorBox>
			<colorBox names="/*钢蓝*/" classes="bg-SteelBlue"></colorBox>
			<colorBox names="淡蓝色" classes="bg-LightSkyBlue"></colorBox>
			<colorBox names="天蓝色" classes="bg-SkyBlue"></colorBox>
			<colorBox names="深天蓝" classes="bg-DeepSkyBlue"></colorBox>
			<colorBox names="淡蓝" classes="bg-LightBLue"></colorBox>
			<colorBox names="火药蓝" classes="bg-PowDerBlue"></colorBox>
			<colorBox names="军校蓝" classes="bg-CadetBlue"></colorBox>
			<colorBox names="蔚蓝色" classes="bg-Azure"></colorBox>
			<colorBox names="淡青色" classes="bg-LightCyan"></colorBox>
			<colorBox names="苍白的绿宝石" classes="bg-PaleTurquoise"></colorBox>
			<colorBox names="青色" classes="bg-Cyan"></colorBox>
			<colorBox names="水绿色" classes="bg-Aqua"></colorBox>
			<colorBox names="深绿宝石" classes="bg-DarkTurquoise"></colorBox>
			<colorBox names="深石板灰" classes="bg-DarkSlateGray"></colorBox>
			<colorBox names="深青色" classes="bg-DarkCyan"></colorBox>
			<colorBox names="水鸭色" classes="bg-Teal"></colorBox>
			<colorBox names="适中的绿宝石" classes="bg-MediumTurquoise"></colorBox>
			<colorBox names="浅海洋绿" classes="bg-LightSeaGreen"></colorBox>
			<colorBox names="绿宝石" classes="bg-Turquoise"></colorBox>
			<colorBox names="绿玉/碧绿色" classes="bg-Auqamarin"></colorBox>
			<colorBox names="适中的碧绿色" classes="bg-MediumAquamarine"></colorBox>
			<colorBox names="适中的春天的绿色" classes="bg-MediumSpringGreen"></colorBox>
			<colorBox names="薄荷奶油" classes="bg-MintCream"></colorBox>
			<colorBox names="春天的绿色" classes="bg-SpringGreen"></colorBox>
			<colorBox names="海洋绿" classes="bg-SeaGreen"></colorBox>
			<colorBox names="蜂蜜" classes="bg-Honeydew"></colorBox>
			<colorBox names="淡绿色" classes="bg-LightGreen"></colorBox>
			<colorBox names="苍白的绿色" classes="bg-PaleGreen"></colorBox>
			<colorBox names="深海洋绿" classes="bg-DarkSeaGreen"></colorBox>
			<colorBox names="酸橙绿" classes="bg-LimeGreen"></colorBox>
			<colorBox names="酸橙色" classes="bg-Lime"></colorBox>
			<colorBox names="森林绿" classes="bg-ForestGreen"></colorBox>
			<colorBox names="纯绿" classes="bg-Green"></colorBox>
			<colorBox names="深绿色" classes="bg-DarkGreen"></colorBox>
			<colorBox names="查特酒绿" classes="bg-Chartreuse"></colorBox>
			<colorBox names="草坪绿" classes="bg-LawnGreen"></colorBox>
			<colorBox names="绿黄色" classes="bg-GreenYellow"></colorBox>
			<colorBox names="橄榄土褐色" classes="bg-OliveDrab"></colorBox>
			<colorBox names="米色(浅褐色)" classes="bg-Beige"></colorBox>
			<colorBox names="浅秋麒麟黄" classes="bg-LightGoldenrodYellow"></colorBox>
			<colorBox names="象牙" classes="bg-Ivory"></colorBox>
			<colorBox names="浅黄色" classes="bg-LightYellow"></colorBox>
			<colorBox names="纯黄" classes="bg-Yellow"></colorBox>
			<colorBox names="橄榄" classes="bg-Olive"></colorBox>
			<colorBox names="深卡其布" classes="bg-DarkKhaki"></colorBox>
			<colorBox names="柠檬薄纱" classes="bg-LemonChiffon"></colorBox>
			<colorBox names="灰秋麒麟" classes="bg-PaleGodenrod"></colorBox>
			<colorBox names="卡其布" classes="bg-Khaki"></colorBox>
			<colorBox names="金" classes="bg-Gold"></colorBox>
			<colorBox names="玉米色" classes="bg-Cornislk"></colorBox>
			<colorBox names="秋麒麟" classes="bg-GoldEnrod"></colorBox>
			<colorBox names="花的白色" classes="bg-FloralWhite"></colorBox>
			<colorBox names="老饰带" classes="bg-LightYellow"></colorBox>
			<colorBox names="小麦色" classes="bg-Wheat"></colorBox>
			<colorBox names="鹿皮鞋" classes="bg-Moccasin"></colorBox>
			<colorBox names="橙色" classes="bg-Orange"></colorBox>
			<colorBox names="番木瓜" classes="bg-PapayaWhip"></colorBox>
			<colorBox names="漂白的杏仁" classes="bg-BlanchedAlmond"></colorBox>
			<colorBox names="纳瓦霍白" classes="bg-NavajoWhite"></colorBox>
			<colorBox names="古代的白色" classes="bg-AntiqueWhite"></colorBox>
			<colorBox names="晒黑" classes="bg-Tan"></colorBox>
			<colorBox names="结实的树" classes="bg-BrulyWood"></colorBox>
			<colorBox names="浓汤)乳脂,番茄等" classes="bg-Bisque"></colorBox>
			<colorBox names="深橙色" classes="bg-DarkOrange"></colorBox>
			<colorBox names="亚麻布" classes="bg-Linen"></colorBox>
			<colorBox names="秘鲁" classes="bg-Peru"></colorBox>
			<colorBox names="桃色" classes="bg-PeachPuff"></colorBox>
			<colorBox names="沙棕色" classes="bg-SandyBrown"></colorBox>
			<colorBox names="巧克力" classes="bg-Chocolate"></colorBox>
			<colorBox names="马鞍棕色" classes="bg-SaddleBrown"></colorBox>
			<colorBox names="海贝壳" classes="bg-SeaShell"></colorBox>
			<colorBox names="黄土赭色" classes="bg-Sienna"></colorBox>
			<colorBox names="浅鲜肉(鲑鱼)色" classes="bg-LightSalmon"></colorBox>
			<colorBox names="珊瑚" classes="bg-Coral"></colorBox>
		</div>
	</div>
</template>

<script>
	import colorBox from '@/views/components/colorBox.vue';
	export default {
		components: {
			colorBox
		},
		data() {
			return {
				list1: [{
						title: "// 开启弹性布局:",
						class: "flex"
					},
					{
						title: "// 使用flex1:",
						class: "flex1"
					},
					{
						title: "// 默认换行:",
						class: "flex-wrap"
					},
					{
						title: "// 默认不换行:",
						class: "flex-nowrap"
					},
					{
						title: "// 按列方向排列:",
						class: "flex-col"
					},
					{
						title: "// 按行方向排列:",
						class: "flex-row"
					}
				],
				list2: [{
						title: "// 主轴方向对其方式-居头:",
						class: "jus-sta"
					},
					{
						title: "// 主轴方向对其方式-居中:",
						class: "jus-cen"
					},
					{
						title: "// 主轴方向对其方式-居尾:",
						class: "jus-end"
					},
					{
						title: "// 主轴方向对其方式-头尾两极分化:",
						class: "jus-spa-bet"
					},
					{
						title: "// 主轴方向对其方式-环绕:",
						class: "jus-spa-aro"
					},
					{
						title: "// 侧轴方向对其方式-居头:",
						class: "ali-sta"
					},
					{
						title: "// 侧轴方向对其方式-居中:",
						class: "ali-cen"
					},
					{
						title: "// 侧轴方向对其方式-居尾:",
						class: "ali-end"
					},
					{
						title: "// 单个自身对其方式-居头:",
						class: "self-sta"
					},
					{
						title: "// 单个自身对其方式-居中:",
						class: "self-cen"
					},
					{
						title: "// 单个自身对其方式-居尾:",
						class: "self-end"
					},
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	.codeBox {
		padding: 10px 20px;
		width: 1000px;
		max-height: 300px;
		overflow: scroll;
		border-radius: 10px;
		color: skyblue;
		font-size: 14px;
		background: #2B2B2B;

		&::-webkit-scrollbar {
			width: 0px;
		}

		&::-webkit-scrollbar-thumb {
			background: skyblue;
			border-radius: 20px;
		}
	}
</style>
